import React, { useState } from "react";
import { HeartTwoTone, HeartFilled, ShareAltOutlined } from "@ant-design/icons";
import {
  MinusOutlined,
  PlusOutlined,
  QuestionOutlined,
} from "@ant-design/icons";
import { Avatar, Badge, Button, Switch, Space } from "antd";
type Props = {};

const Zan = (props: Props) => {
  const [list, setList] = useState(false);
  const ButtonGroup = Button.Group;

  const [count, setCount] = useState(1);
  const [show, setShow] = useState(true);

  const increase = () => {
    setCount(count + 1);
    setList(true);
  };

  const decline = () => {
    let newCount = count - 1;
    if (newCount < 0) {
      newCount = 0;
    }
    setCount(newCount);
    setList(false);
  };

  const random = () => {
    const newCount = Math.floor(Math.random() * 100);
    setCount(newCount);
  };

  const onChange = (checked: boolean) => {
    setShow(checked);
  };

  return (
    <div>
        <Space direction="vertical">
          <Space size="large">
            <Badge count={count} offset={[10, 0]}>
              {list ? (
                < HeartFilled  style={{ color: 'hotpink',fontSize:"24px" }} onClick={decline} />
              ) : (
                < HeartFilled style={{ color: '#ccc',fontSize:"24px"  }} onClick={increase} />
              )}
            </Badge>
          </Space>
        </Space>
    </div>
  );
};

export default Zan;
